<template>
	<view class="address">
		<view class="address-con">
			<view class="address-box">
				<view class="address-item" v-for="item in addressList" @tap="changeAddress(item)">
					<view class="address-l">
						<view class="pic">
							{{ item.name.slice(0,1) }}
						</view>
						<view class="add-info">
							<view class="name">
								{{ item.name }}
							</view>
							<view class="add-info-c">
								<view class="add-info-c-l">
									<view class="title">
										地址：{{item.provinceStr + item.cityStr + item.areaStr}}
									</view>
									<view class="title">
										联系方式：{{ item.tel }}
									</view>
								</view>
					</view>
						</view>
					</view>
					<view class="edit" @tap="edit(item)">
						编辑
					</view>
				</view>
			</view>
			
			<navigator url="addAddress/addAddress?type=add" class="add">
				新增地址
			</navigator>
		</view>
	</view>
</template>

<script>
	import { list } from '../../../utils/address/index.js';
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userInfo').id,
				addressList: [],
				address: ''
			};
		},
		methods: {
		async	getAddressList () {
				let data = await list({
					userId: this.userId
				});
				// console.log(data)
				this.addressList = data.data.data;
				let defaultAddress = data.data.data.find(el => el.isUse == '1');
				console.log('默认地址',defaultAddress);
				uni.setStorageSync('address', defaultAddress);
				console.log(this.addressList);
				this.address = this.addressList.provinceStr + this.addressList.cityStr + this.addressList.areaStr;
			},
			edit (val) {
				console.log(val);
				uni.navigateTo({
					url: `addAddress/addAddress?type=edit&id=${ val.id }`
				})
			},
			changeAddress (address) {
				uni.setStorageSync('address', address);
				uni.navigateTo({
					url: '../../order/order'
				})
			}
		},
		onShow() {
			this.getAddressList();
		}
	}
</script>

<style lang="scss">
.address {
	width: 100vw;
	min-height: 100vh;
	max-height: 100%;
	background-color: #354E44;
	.address-con {
		width: 100vw;
		min-height: 100vh;
		max-height: 100%;
		background-color: #F1ECE7;
		border-radius: 50rpx 50rpx 0 0;
		padding: 60rpx 40rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.address-item {
			width: 100%;
			height: 208rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 32rpx;
			box-sizing: border-box;
			// padding: 52rpx 65rpx 0 38rpx;
			padding: 0 65rpx 0 38rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.address-l {
				display: flex;
				align-items: center;
				width: 85%;
				.pic {
					width: 82rpx;
					height: 82rpx;
					background: #354E44;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;
					color: #FFFFFF;
					letter-spacing: 2.57rpx;
					margin-right: 26rpx;
				}
				.add-info {
					flex: 1;
					.name {
						font-size: 26rpx;
						font-weight: bolder;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
					}
					.add-info-c {
						width: 100%;
						display: flex;
						justify-content: space-between;
						.add-info-c-l {
							font-size: 22rpx;
							color: #8D8D8D;
							letter-spacing: 1.57rpx;
						}
					}
				}
			}
			.edit {
				position: relative;
				width: 52rpx;
				height: 37rpx;
				font-size: 26rpx;
				color: #8D8D8D;
				&::before {
					position: absolute;
					left: -25rpx;
					content: '';
					// display: inline-block;
					width: 2rpx;
					height: 34rpx;
					background-color: rgba(151,151,151, 0.35);
				}
			}
		
		
		
		}
	}
	.add {
		width: 80%;
		height: 80rpx;
		border-radius: 70rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #354E44;
		color: #fff;
		margin: 0 auto;
		font-size: 30rpx;
	}
}
</style>
